<template>
    <div class="wrapper">
        <!-- <wxc-tab-page ref="wxc-tab-page"
            :tab-titles="tabTitles"
            :tab-styles="tabStyles"
            title-type="text"
            :tab-page-height="tabPageHeight">
            <scroller class="container" :style="scrollerStyle">
                
            </scroller>
            <scroller class="container" :style="scrollerStyle">
                
            </scroller>
            <scroller class="container" :style="scrollerStyle">
                
            </scroller>
        </wxc-tab-page>
        <wxc-loading :show="showLoading" :need-mask="mask"></wxc-loading> -->
        <scroller class="container" :style="scrollerStyle">
            <div class="upload-div">
                <text style="color:#999999;margin-top:20">现场、机房、轿厢、轿顶、层站、底坑(以上位置必须上传)
                </text>
                <div class="img-row">
                    <div class="img-div" @click="pickImg('heyPath')">
                        <image v-if="showHeyPath" class="image" :src="heyPath"></image>
                        <text v-if="!showHeyPath" class="text">上传现场</text>
                    </div>
                    <div class="img-div" @click="pickImg('jifPath')">
                        <image v-if="showJifPath" class="image" :src="jifPath"></image>
                        <text v-if="!showJifPath" class="text">上传机房</text>
                    </div>
                </div>
                <div class="img-row">
                    <div class="img-div" @click="pickImg('jiaoxPath')">
                        <image v-if="showJiaoxPath" class="image" :src="jiaoxPath"></image>
                        <text  v-if="!showJiaoxPath" class="text">上传轿厢</text>
                    </div>
                    <div class="img-div" @click="pickImg('jiaodPath')">
                        <image v-if="showJiaodPath" class="image" :src="jiaodPath"></image>
                        <text v-if="!showJiaodPath" class="text">上传轿顶</text>
                    </div>
                </div>
                <div class="img-row">
                    <div class="img-div" @click="pickImg('cengzPath')">
                        <image v-if="showCengzPath" class="image" :src="cengzPath"></image>
                        <text v-if="!showCengzPath" class="text">上传层站</text>
                    </div>
                    <div class="img-div" @click="pickImg('dikPath')">
                        <image v-if="showDikPath" class="image" :src="dikPath"></image>
                        <text v-if="!showDikPath" class="text">上传底坑</text>
                    </div>
                </div>
                <text style="color:#999999;margin-top:10">备注</text>
                <div class="img-div" @click="pickImg('remarkPath')">
                            <image v-if="remarkPath" class="image" :src="remarkPath"></image>
                            <text v-if="!showRemarkPath" class="text">上传备注</text>
                </div>
            </div>
            <div class="div-button">
                <wxc-button text="同步"
                    size="big"
                    :btnStyle="synchBtn"
                    textStyle="{color:'#ffffff'}"
                    :disabled = "synchDistable"
                    @wxcButtonClicked="synchOss"></wxc-button>
                 <wxc-button text="确认上传"
                    size="big"
                    btnStyle="{backgroundColor:'#f3624f',borderColor: '#f3624f'}"
                    textStyle="{color:'#ffffff'}"
                    :disabled = "confirmDisable"
                    @wxcButtonClicked="savePhoto"></wxc-button>
                    
            </div>
        </scroller>
        
        <wxc-loading :show="showLoading" :need-mask="mask"></wxc-loading>
    </div>

</template>
<script>
    import { WxcTabPage, Utils,WxcCell,WxcButton,WxcLoading,WxcDialog } from 'weex-ui';
    import { log } from 'util';
    var waterMasker = weex.requireModule('waterMasker')
    var uploadOss = weex.requireModule('uploadOss')
    var amap = weex.requireModule('amap')
    var axios = weex.requireModule('bmAxios')
    // var OSS = require('ali-oss')
    export default {
        components:{
            WxcTabPage,
            Utils,
            WxcCell,
            WxcButton,
            WxcLoading,
            WxcDialog ,
        },
        data () {
            return{
                token:'',
                tabTitles: [
                    {title: '上传照片'},
                    {title: '已出库库存'},
                    {title: '库存申请'}
                ],
                tabStyles: {
                    bgColor: '#FFFFFF',
                    titleColor: '#666666',
                    activeTitleColor: '#f49428',
                    activeBgColor: '#FFFFFF',
                    isActiveTitleBold: false,
                    // iconWidth: 70,
                    // iconHeight: 70,
                    width: 250,
                    height: 100,
                    fontSize: 30,
                    hasActiveBottom: true,
                    activeBottomColor: '#f49428',
                    activeBottomHeight: 6,
                    activeBottomWidth: 250,
                    // textPaddingLeft: 10,
                    // textPaddingRight: 10,
                    // normalBottomColor: 'rgba(0,0,0,0.4)',
                    // normalBottomHeight: 1,
                    // hasRightIcon: true,
                },
                valueStyle:{
                    color:'#999999',
                },
                cellStyle:{
                    height:'90px'
                },
                contentValueStyle:{
                    color:'#999999',
                    fontSize:'25px',
                },
                contentCellStyle:{
                    height:'20px'
                },
                text1Style:{
                    color:'#ea9527'  
                },
                text2Style:{
                    color:'#f35e4d'  
                },
                btnStyle:{
                    backgroundColor:'#ffffff',
                    borderColor: '#dfdfdf',
                },
                synchBtn:{
                    backgroundColor:'#2590f5',
                    borderColor: '#2590f5',
                },
                data:{},
                showDialog:false,
                showContent:true,
                showLoading:false,
                mask:true,
                lastUpkeepType:'无数据',
                upkeepTypeList:[],
                chooseTypeList:[],
                upkeepContentList:[],
                myteamMatesList: [],
                chooseMatesList:[],
                upkeepType:'',
                upkeepTypeId:'',
                staff2Name:'',
                formItem:{},
                upkeepImg:'',
                address:'',
                heyPath:'',
                jifPath:'',
                jiaoxPath:'',
                jiaodPath:'',
                cengzPath:'',
                dikPath:'',
                remarkPath:'',
                uploadImgList:{
                    heyPath:'',
                    jifPath:'',
                    jiaoxPath:'',
                    jiaodPath:'',
                    cengzPath:'',
                    dikPath:'',
                    remarkPath:'',
                },
                showHeyPath:false,
                showJifPath:false,
                showJiaoxPath:false,
                showJiaodPath:false,
                showCengzPath:false,
                showDikPath:false,
                showRemarkPath:false,
                confirmDisable:true,
                synchDistable:true,
                ossRes:false,
            }
        },
        methods: {
            pickImg(type){
                if(this.address == ''){
                    this.$notice.toast({
                        message: '无定位信息，请重新返回并重新打开此页面'
                    })
                    return
                }
                this.$image.camera({
                    maxCount: 1
                })
                .then(resData => {
                    this.$notice.loading.show() 
                    var imgSor = resData[0]
                    let date = new Date()
                    var name =  type + '_'+ this.data.upkeepNumber + '_' + Date.parse(date) +'.png'
                    //水印内容
                    var staffName = this.data.staff1Name
                    var time = new Date().toLocaleString()
                    var text = staffName + '  ' + this.address + '  ' + time
                    this.getWaterMask(imgSor,name,text,type)
                    this.$notice.loading.hide()
                    console.log('上传时',this.uploadImgList);
                }, error => {
                })
            },
            getWaterMask(imgSor,name,text,type){
                var _this = this
                waterMasker.transform(imgSor,name,text,
                function(resData){
                    if(resData.result == 'success'){
                        var imgPath = resData.imgPath + '/' + name
                        switch(type){
                            case 'heyPath':
                            _this.heyPath = imgPath
                            _this.showHeyPath = true
                            _this.uploadImgList.heyPath = imgPath
                            _this.$storage.set('heyPath'+_this.data.upkeepNumber, imgPath)
                            break;
                            case 'jifPath':
                            _this.jifPath = imgPath
                            _this.showJifPath = true
                            _this.uploadImgList.jifPath = imgPath
                            _this.$storage.set('jifPath'+_this.data.upkeepNumber, imgPath)
                            break;
                            case 'jiaoxPath':
                            _this.jiaoxPath = imgPath
                            _this.showJiaoxPath = true
                            _this.uploadImgList.jiaoxPath = imgPath
                            _this.$storage.set('jiaoxPath'+_this.data.upkeepNumber, imgPath)
                            break;
                            case 'jiaodPath':
                            _this.jiaodPath = imgPath
                            _this.showJiaodPath = true
                            _this.uploadImgList.jiaodPath = imgPath
                            _this.$storage.set('jiaodPath'+_this.data.upkeepNumber, imgPath)
                            break;
                            case 'cengzPath':
                            _this.cengzPath = imgPath
                            _this.showCengzPath = true
                            _this.uploadImgList.cengzPath = imgPath
                            _this.$storage.set('cengzPath'+_this.data.upkeepNumber, imgPath)
                            break;
                            case 'dikPath':
                            _this.dikPath = imgPath
                            _this.showDikPath = true
                            _this.uploadImgList.dikPath = imgPath
                            _this.$storage.set('dikPath'+_this.data.upkeepNumber, imgPath)
                            break;
                            case 'remarkPath':
                            _this.remarkPath = imgPath
                            _this.showRemarkPath = true
                            _this.uploadImgList.remarkPath = imgPath
                            _this.$storage.set('remarkPath'+_this.data.upkeepNumber, imgPath)
                            break;
                        }
                        _this.synchDistable = false
                        _this.confirmDisable = true

                    }else{
                        _this.$notice.toast({
                            message: '上传失败'
                        })
                    }
                })
            },
            synchOss(e){
                if(e.disabled){
                    return
                }
                this.$notice.loading.show('正在同步...') 
                let obj = this.uploadImgList
                for(let key in obj){
                    let path = obj[key]
                    if(!path){
                        continue
                    }
                    let http = path.indexOf("http");
                    //判断path是否是为空，或者以http开头
                    if(path == '' || http == 0){
                        continue
                    }else{
                        let date = new Date()
                        let objName = 'staff/' + 'credentials' + '/' 
                                    + this.data.upkeepNumber 
                                    + '_' + date.getFullYear() + (date.getMonth() + 1) 
                                    + date.getDate() + date.getHours() 
                                    + date.getMinutes() 
                                    + date.getSeconds() 
                                    + date.getMilliseconds() + key + '.png' 
                        // this.uploadOss(path,objName,key)
                        let _this = this
                        uploadOss.upload(path,objName,function(resData){
                            if(resData.result == 'success'){
                                _this.uploadImgList[key] = resData.url
                            }else{
                                _this.$notice.toast({
                                    message: '同步失败，请检查网络'
                                })
                                _this.synchDistable = false
                                _this.confirmDisable = true

                                //同步标志位缓存,避免重复同步
                                _this.$storage.set('synchDistable'+ _this.data.upkeepNumber,false)
                                _this.$storage.set('confirmDisable'+ _this.data.upkeepNumber,true)
                                return
                            }
                        })
                    }
                }
                this.synchDistable = true
                this.confirmDisable = false

                //同步标志位缓存,避免重复同步
                this.$storage.set('synchDistable'+ this.data.upkeepNumber,true)
                this.$storage.set('confirmDisable'+ this.data.upkeepNumber,false)
                this.$notice.loading.hide() 
            },
            uploadOss(path,objName,key){
                let _this = this
                uploadOss.upload(path,objName,function(resData){
                    if(resData.result == 'success'){
                        _this.uploadImgList[key] = resData.url
                        console.log(key,resData.url);
                        _this.ossRes = true
                    }else{
                        _this.ossRes = false
                    }
                })
            },
            savePhoto(e){
                if(e.disabled){
                    return
                }
                this.showLoading = true
                let filter = {}
                filter.heyPath = this.uploadImgList.heyPath
                filter.jifPath = this.uploadImgList.jifPath
                filter.jiaoxPath = this.uploadImgList.jiaoxPath
                filter.jiaodPath = this.uploadImgList.jiaodPath
                filter.cengzPath = this.uploadImgList.cengzPath
                filter.dikPath = this.uploadImgList.dikPath
                filter.remarkPath = this.uploadImgList.remarkPath
                filter.upkeepId = this.data.upkeepId
                filter.staff1Id = this.data.staff1Id
                filter.address = this.address
                //提交服务器
                this.$fetch({
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': `Bearer `+ this.token
                    },
                    method: 'POST',    
                    name: 'savePhoto',
                    data: filter
                }).then(resData => {
                    if(resData.success){
                        this.confirmDisable = true
                        this.$storage.set('confirmDisable'+ this.data.upkeepNumber,true)
                        this.$notice.toast({
                            message: '上传成功'
                        })
                    }else{
                        this.$notice.toast({
                            message: '网络错误'
                        })
                    }
                }, error => {
                    this.$notice.toast({
                        message: '网络错误'
                    })
                })
                this.showLoading = false
            },
            getAddress(locationLng,locationLat){
                let data = {}
                let _this = this
                let loc = locationLng+','+locationLat
                data.location = loc
                data.key = 'c1f73016285c30b57fda31598f5757c2'
                this.$fetch({
                    method: 'GET',
                    url: 'https://restapi.amap.com/v3/geocode/regeo',
                    header: {},
                    data: data,
                    timeout: 3000
                }).then(resData => {
                    if(resData.status == "1"){
                        this.address = resData.regeocode.formatted_address
                    }else{
                        this.getLocationFromStorage()
                    }
                }, error => {
                    this.getLocationFromStorage()
                })
            },
            getLocationFromStorage(){
                let _this = this
                this.$storage.get('address').then(resData => {
                    this.$notice.confirm({
                        title: '定位失败',
                        message: '是否使用此地址:'+resData ,
                        okTitle: '确认',
                        cancelTitle: '取消',
                    okCallback() {
                        _this.address = resData
                    },
                    cancelCallback() {
                        // 点击取消按钮的回调
                    }
                })
                },error => {

                })
            }

        },
        created(){
            this.$notice.loading.show() 
            const tabPageHeight = Utils.env.getPageHeight()
            this.containerHeight = tabPageHeight
            this.scrollerStyle ={ height: this.containerHeight + 'px' }

            // 获取token
            this.token = this.$storage.getSync('token')
            if(!this.token){
                this.$router.setHomePage('/pages/login.js')
            }

            this.$router.getParams().then(resData => {
                this.data = resData.upkeepDetail
                //获取缓存图片
                this.$storage.get('heyPath'+ this.data.upkeepNumber).then(resData => {
                    this.heyPath = resData;
                    this.showHeyPath = true
                },error => {})

                this.$storage.get('jifPath'+ this.data.upkeepNumber).then(resData => {
                    this.jifPath = resData;
                    this.showJifPath = true
                },error => {})

                this.$storage.get('jiaoxPath'+ this.data.upkeepNumber).then(resData => {
                    this.jiaoxPath = resData;
                    this.showJiaoxPath = true
                },error => {})

                this.$storage.get('jiaodPath'+ this.data.upkeepNumber).then(resData => {
                    this.jiaodPath = resData;
                    this.showJiaodPath = true
                },error => {})

                this.$storage.get('cengzPath'+ this.data.upkeepNumber).then(resData => {
                    this.cengzPath = resData;
                    this.showCengzPath = true
                },error => {})

                this.$storage.get('dikPath'+ this.data.upkeepNumber).then(resData => {
                    this.dikPath = resData;
                    this.showDikPath = true
                },error => {})

                this.$storage.get('remarkPath'+ this.data.upkeepNumber).then(resData => {
                    this.remarkPath = resData;
                    this.showRemarkPath = true
                },error => {})

                //获取uploadImgList
                this.$storage.get('uploadImgList'+ this.data.upkeepNumber).then(resData => {
                    this.uploadImgList = JSON.parse(resData)
                    console.log('初始化',this.uploadImgList);
                },error => {})
                
                //获取同步，上传标志位
                this.$storage.get('confirmDisable'+ this.data.upkeepNumber).then(resData => {
                    this.confirmDisable = resData
                },error => {})

                this.$storage.get('synchDistable'+ this.data.upkeepNumber).then(resData => {
                    this.synchDistable = resData
                },error => {})

            })
            //获取定位
            this.$geo.get().then(data => {
                //获取行政位置
                var locationLng = data.locationLng
                var locationLat = data.locationLat
                // var locationLng = '120.246842'
                // var locationLat = '31.546071';
                this.getAddress(locationLng,locationLat)
            }, error => {
                this.getLocationFromStorage()
            })
            // var isAndroid = Utils.env.isAndroid()
            // if(isAndroid){
            //     var id = 'test'
            //     let _this = this
            //     amap.getUserLocation(id,function (resData) {
            //         if(resData.result == 'success'){
            //             _this.address = resData.data.position[2]
            //         }else{
            //             _this.getLocationFromStorage()
            //         }
            //     });  
            // }else{
            //     this.$geo.get().then(data => {
            //         //获取行政位置
            //         var locationLng = data.locationLng
            //         var locationLat = data.locationLat
            //         // var locationLng = '120.246842'
            //         // var locationLat = '31.546071';
            //         this.getAddress(locationLng,locationLat)
            //     }, error => {
            //         this.getLocationFromStorage()
            //     })
            // }
            this.$notice.loading.hide() 
        },
        eros:{
            beforeDisappear(){
                //页面消失前保存获取uploadImgList 标志位
                this.$storage.setSync('uploadImgList'+ this.data.upkeepNumber, JSON.stringify(this.uploadImgList))
                this.$storage.setSync('synchDistable'+ this.data.upkeepNumber,this.synchDistable)
                this.$storage.setSync('confirmDisable'+ this.data.upkeepNumber,this.confirmDisable)
                
            }
        }
    }
</script>

<style scoped>
    .container {
        flex: 1;
        width: 750px;
        background-color: #f2f3f4;
    }
    .upload-div{
        margin:0 10 0 10;
        flex-direction: column;
    }
    .img-row{
        flex-direction: row;
    }
    .img-div{
        flex: 1;
        margin: 10;
        height: 360 ;
        width: 350;
        background-color: #e2e2e2;
        justify-content: center;
        align-items: center;
    }
    .text{
        color: #999999;
        font-size: 35;
    }
    .image{
        width: 360;
        height: 360;
    }
    .div-button{
        flex-direction: row;
        justify-content: space-around;
        margin-top: 20px;
        margin-bottom: 20px;
    }   
</style>
